@import url('./reset.scss');
@import url('./icon.scss');

/* -- button style -- */
.btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  border: 1px solid transparent;
  outline: none;
}

.btn-blue {
  color: #fff;
  background: #5485fe;
  &:hover {
    background: #3c70f1;
  }
  &:active {
    box-shadow: 0px 6px 9px #4d6cb9 inset;
  }
  &.disable {
    background: rgba(84, 133, 254, 0.75);
    cursor: not-allowed;
  }
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-operate {
  display: inline-block;
  position: relative;
  .operate-list {
    position: absolute;
    background: #fff;
    top: 100%;
    left: 0;
    margin: 2px 0 0;
    border: 1px solid #ccc;
    border-radius: 3px;
    z-index: 3;
    min-width: 160px;
    .operate-list-item {
      padding: 8px 20px;
      cursor: pointer;
      &:hover {
        background: #5485fe;
        color: #fff;
      }
    }
  }
  .caret {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2px;
    width: 0;
    height: 0;
    border: {
      top: 4px solid;
      left: 4px solid transparent;
      right: 4px solid transparent;
    }
  }
}

/* -- panel -- */
.panel-fusionstack {
  background: #eee;
  padding: 20px;
  position: relative;
  .panel-module {
    background: #fff;
    height: 100%;
    padding: 20px;
    .panel-title {
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 20px;
      margin-top: 10px;
    }
    .btn-ope-box {
      padding-bottom: 10px;
    }
  }
}

/* -- grid style -- */
.grid-box {
  max-height: calc(100% - 100px);
  overflow: auto;
  table {
    width: 100%;
    thead {
      tr {
        height: 50px;
        color: #fff;
        line-height: 50px;
        background: #2f3340;
        th {
          text-align: left;
          padding-left: 20px;
          border-right: 1px solid #eee;
          cursor: pointer;
        }
      }
    }
    tbody {
      tr {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #eee;
        border-left: 1px solid #eee;
        border-right: 1px solid #eee;
        &:hover {
          background-color: #cee2f7;
        }
        &.st-selected {
          background: #cee2f7;
        }
        td {
          padding-left: 20px;
          color: #000;
          a {
            color: #000;
          }
        }
      }
    }
    tfoot {
      border: {
        top: none;
        bottom: 1px solid #eee;
        left: 1px solid #eee;
        right: 1px solid #eee;
      }
      td {
        padding: 20px;
        nav {
          ul {
            li {
              display: inline-block;
              margin-right: 20px;
              &.active {
                a {
                  color: red;
                }
              }
              a {
                color: #000;
              }
            }
          }
        }
      }
    }
  }
  .gird-fill-block {
    height: 400px;
  }
}

/* -- detail style -- */
$details-height: 356px;
$details-title-height: 59px;
.details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #eee;
  box-shadow: 0 0 5px #ccc;
  height: 400px;
  overflow: auto;
  transition: height 0.3s ease;
  &.ng-hide-remove,
  &.ng-hide-add.ng-hide-add-active {
    height: 0;
  }
  &.ng-hide-remove.ng-hide-remove-active,
  &.ng-hide-add {
    height: 400px;
  }
  .title {
    height: $details-title-height;
    width: 100%;
    border-bottom: 1px solid #eee;
    .tab {
      float: left;
      .tab-item {
        float: left;
        height: $details-title-height;
        line-height: $details-title-height;
        padding: 0 40px;
        color: #ccc;
        cursor: pointer;
        &.active {
          color: #000;
          border-bottom: 2px solid #5485fe;
        }
      }
    }
    .close-box {
      float: right;
      height: $details-title-height;
      i {
        color: #ccc;
        margin-right: 25px;
        line-height: $details-title-height;
        cursor: pointer;
      }
    }
  }
}

/* -- other -- */
.alert-error {
  background: #f2dede;
  border: 1px solid #ebccd1;
  color: #a94442;
  padding: 10px;
  margin-top: 2px;
}